<!--
 * @Descripttion: 
 * @Author: yuxi
 * @Date: 2020-12-02 16:06:00
 * @LastEditors: yuxi
 * @LastEditTime: 2020-12-02 16:54:16
-->
<template>
  <div class="user-item-card">
    <div class="info">
      <span class="name">{{ user.name }}</span>
      <span class="gender">{{ user.gender | gender }}</span>

    </div>
    <div class="des">
      年龄：<span class="age">{{ user.age }}</span>
      地址：<span class="address">{{ user.address }}</span>

    </div>
    <div class="id">{{ user.id }}</div>
  </div>
</template>

<script>
export default {
  props: {
    user: {
      type: Object,
      default () {
        return {}
      }
    }
  },
  name: 'UserItemCard',
  filters: {
    gender (v) {
      return v ? '男':'女'
    }
  }
}
</script>

<style>
.user-item-card {
  position: relative;
  padding: 10px;
  border-bottom: 1px solid #b9b9b9;
  text-align: left;
  color: #999;
}
.user-item-card:first-child {
}
.user-item-card > .info {
  padding: 5px 0;
}
.user-item-card > .info > .name {
  font-size: 20px;
  color: #333;
}
.user-item-card > .info > .gender {
  margin: 0 20px;
  font-size: 12px;
}
.user-item-card > .des {
  font-size: 14px;
}
.user-item-card > .des > .age {
}
.user-item-card > .des > .address {
}
.user-item-card > .id {
  position: absolute;
  right: 10px;
  top: 10px;
}
</style>